<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>新疆种质资源库管理系统</title>
        $[_commoncss]$ $[_layoutcss]$
        <link rel="stylesheet" href="../../framework/swiper@7.3.1/swiper-bundle.min.css" />
        <link rel="stylesheet" href="./index.css" />
        <link rel="stylesheet" href="../../resources/css/common.css" />

        $[_commonjs]$ $[_layoutjs]$
        <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=72c79169c4ba46e23d92ee88f7574202&plugin=Map3D"
        ></script>
        <script src="https://webapi.amap.com/loca?v=2.0.0&key=72c79169c4ba46e23d92ee88f7574202"></script>

        <script src="../../framework/echarts@5.3.0/echarts.min.js"></script>
        <script src="../../framework/swiper@7.3.1/swiper-bundle.min.js"></script>
        <script src="../../resources/js/utils.js"></script>
        <script src="../../resources/js/lonlat-tranform.js"></script>
        <script src="./world-json.js"></script>
        <script src="./index-charts.js"></script>
        <script src="./svg.js"></script>
        <script src="../../resources/js/head-component.js"></script>
        <script src="./component.js"></script>
        <script src="./index.js"></script>
    </head>

    <body>
        <div id="app" v-cloak>
            <div class="container-map-btn">
                <span :class="item.value == mapType?'active':''" v-for="(item,index) in mapTypeList" :key="index + 'mapzzly'" @click="mapTypeClick(item)">{{item.name}}</span>
            </div>
            <div class="china-map-legend" v-show="showChinaMap">
                <div @click="chinaLegendChange(item.value)" class="china-map-legend-box" :class="chinaLegendActive.includes(item.value) ? '' : 'china-map-legend-box-active'" v-for="item in chinaLegendList" :key="item.value">
                    <img :src="item.icon" alt="">
                    <span>{{item.name}}</span>
                </div>
            </div>
            <!-- 地图 -->
            <div id="container-map">
                <px-map-chart v-if="showChinaMap" :zzlyfb-info="zzlyfbData" :legend-selected="chinaLegendActive"></px-map-chart>
                <div id="container-map-world" v-if="!showChinaMap"></div>
            </div>
            <!-- 头部 -->
            <head-component active-menu="zzfb"></head-component>
            <!-- 左侧 -->
            <div class="container-left">
                <div class="contain-box-half">
                    <container-component title="种质资源统计">
                        <zzzytj-component></zzzytj-component>
                    </container-component>
                </div>
                <div class="contain-box-half">
                    <container-component title="种质来源分布">
                        <zzlyfb-component :zzlyfb-info="zzlyfbData"></zzlyfb-component>
                    </container-component>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="container-right">
                <div class="contain-box-half">
                    <container-component title="品种采集统计">
                        <pzcjtj-component></pzcjtj-component>
                    </container-component>
                </div>
                <div class="contain-box-half">
                    <container-component title="近期新增品种">
                        <jqxzpz-component></jqxzpz-component>
                    </container-component>
                </div>
                <div class="contain-box-half">
                    <container-component title="种质申领记录">
                        <zzsljl-component></zzsljl-component>
                    </container-component>
                </div>
            </div>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                mixins: [pageConfig],
            });
        </script>
    </body>
</html>
